<script setup>
/*import HelloWorld from './components/HelloWorld.vue'*/
/*import TheWelcome from './components/TheWelcome.vue'*/
import CountdownTimer from './components/CountdownTimer.vue'
import RollCall from './components/RollCall.vue'
import TigerSlot from './components/TigerSlot.vue'
import { ref } from 'vue'

const showCountdown = ref(false)
const showRollCall = ref(false)
const showTigerSlot = ref(false)

function toggleCountdown() {
  showCountdown.value = !showCountdown.value
  // 确保只有一个弹窗显示
  if (showCountdown.value) {
    showRollCall.value = false
    showTigerSlot.value = false
  }
}

function toggleRollCall() {
  showRollCall.value = !showRollCall.value
  // 确保只有一个弹窗显示
  if (showRollCall.value) {
    showCountdown.value = false
    showTigerSlot.value = false
  }
}

function toggleTigerSlot() {
  showTigerSlot.value = !showTigerSlot.value
  // 确保只有一个弹窗显示
  if (showTigerSlot.value) {
    showCountdown.value = false
    showRollCall.value = false
  }
}
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
<!--    <TheWelcome />-->
    
    <!-- 工具按钮区域 -->
    <div class="tool-buttons-container">
      <!-- 倒计时按钮 -->
      <div class="tool-button-wrapper">
        <button @click="toggleCountdown" class="tool-button countdown-button">
          <span class="tool-icon">⏰</span>
          <span class="tool-text">  倒计闹钟  </span>
        </button>
      </div>
      
      <!-- 随机点名按钮 -->
      <div class="tool-button-wrapper">
        <button @click="toggleRollCall" class="tool-button rollcall-button">
          <span class="tool-icon">🎲</span>
          <span class="tool-text"> 随机点名 </span>
        </button>
      </div>
      
      <!-- 老虎机抽奖按钮 -->
      <div class="tool-button-wrapper">
        <button @click="toggleTigerSlot" class="tool-button tigerslot-button">
          <span class="tool-icon">🎰</span>
          <span class="tool-text">老虎机抽奖</span>
        </button>
      </div>
    </div>
    
    <!-- 倒计时器弹窗 -->
    <CountdownTimer v-if="showCountdown" @close="showCountdown = false" />
    
    <!-- 随机点名弹窗 -->
    <RollCall v-if="showRollCall" @close="showRollCall = false" />
    
    <!-- 老虎机抽奖弹窗 -->
    <TigerSlot v-if="showTigerSlot" @close="showTigerSlot = false" />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}

.tool-buttons-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.tool-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tool-button {
  border: 2px solid var(--vt-c-gold);
  border-radius: 15px;
  padding: 15px 25px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(44, 62, 80, 0.7);
  backdrop-filter: blur(10px);
  color: var(--vt-c-gold);
}

.tool-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
  background: rgba(44, 62, 80, 0.9);
}

.countdown-button {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  border-color: #a777e3;
}

.rollcall-button {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  border-color: #ff9a9e;
}

.tigerslot-button {
  background: linear-gradient(135deg, #ff6b6b, #ffa502);
  border-color: #ffa502;
}

.tool-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.tool-text {
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .tool-buttons-container {
    flex-direction: column;
    align-items: center;
  }
  
  .tool-button-wrapper {
    width: 80%;
    margin-bottom: 15px;
  }
  
  .tool-button {
    width: 100%;
  }
}
</style>